<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <title>SlickGrid example 15: Grid Auto-Resize on Window Resize</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
  <link rel="stylesheet" href="../css/smoothness/jquery-ui.css" type="text/css" />
  <link rel="stylesheet" href="examples.css" type="text/css" />
</head>

<body>
  <h2>Demonstrates:</h2>
  <p>
    Basic Grid with the use of Slick.Plugins.Resizer
    <button onclick="resizeToFixedDimensions()">Fixed Dimensions 800x600</button>
    <button onclick="resumeAutoResize()">Resume Auto-Resize</button>
  </p>

  <h2>View Source:</h2>
  <ul>
    <li>
      <a href="https://github.com/6pac/SlickGrid/blob/master/examples/example15-auto-resize.html"
        target="_sourcewindow">
        View the source for this example on Github
      </a>
    </li>
  </ul>

  <br />

  <div class="container">
    <h2>My Grid Report</h2>
    <div id="myGrid"></div>
  </div>

  <script src="../lib/jquery-1.12.4.min.js"></script>
  <script src="../lib/jquery.event.drag-2.3.0.js"></script>

  <script src="../slick.core.js"></script>
  <script src="../slick.grid.js"></script>
  <script src="../plugins/slick.resizer.js"></script>

  <script>
    var resizer;
    var grid;
    var columns = [
      { id: "title", name: "Title", field: "title", minWidth: 100 },
      { id: "duration", name: "Duration", field: "duration", minWidth: 100 },
      { id: "%", name: "% Complete", field: "percentComplete", minWidth: 100 },
      { id: "start", name: "Start", field: "start", minWidth: 100 },
      { id: "finish", name: "Finish", field: "finish", minWidth: 100 },
      { id: "effort-driven", name: "Effort Driven", field: "effortDriven", minWidth: 100 }
    ];

    var options = {
      enableCellNavigation: true,
      enableColumnReorder: false,
      enableAutoSizeColumns: true,  // you can use the grid "autosizeColumns()" method after the resize, or use forceFitColumns
    };

    function resizeToFixedDimensions() {
      // we can pause the auto-resize and use fixed dimensions 800x600 in this case
      resizer.pauseResizer(true);
      resizer.resizeGrid(0, { height: 600, width: 800 });
    }

    function resumeAutoResize() {
      resizer.pauseResizer(false);
      resizer.resizeGrid();

      // you could also delay the resize (in milliseconds)
      // resizer.resizeGrid(100);
    }

    $(function () {
      var data = [];
      for (var i = 0; i < 500; i++) {
        data[i] = {
          title: "Task " + i,
          duration: "5 days",
          percentComplete: Math.round(Math.random() * 100),
          start: "01/01/2009",
          finish: "01/05/2009",
          effortDriven: (i % 5 == 0)
        };
      }

      grid = new Slick.Grid("#myGrid", data, columns, options);

      // create the Resizer plugin
      // you need to provide a DOM element container for the plugin to calculate available space
      resizer = new Slick.Plugins.Resizer({
        container: '.container', // DOM element selector, can be an ID or a class name

        // optionally define some padding and dimensions
        rightPadding: 5,    // defaults to 0
        bottomPadding: 10,  // defaults to 20
        minHeight: 150,     // defaults to 180
        minWidth: 250,      // defaults to 300

        // you can also add some max values (none by default)
        // maxHeight: 1000
        // maxWidth: 2000
      },
        // the 2nd argument is an object and is optional
        // you could pass fixed dimensions, you can pass both height/width or a single dimension (passing both would obviously disable the auto-resize completely)
        // for example if we pass only the height (as shown below), it will use a fixed height but will auto-resize only the width
        // { height: 300 }
      );
      grid.registerPlugin(resizer);

      // you can optionally Subscribe to the following events
      /*
      resizer.onGridBeforeResize.subscribe(function () {
        console.log('onGridBeforeResize');
      });
      resizer.onGridAfterResize.subscribe(function (e, args) {
        console.log('onGridAfterResize new dimensions', args.dimensions);
      });
      */
    });
  </script>
</body>

</html>